<!-- 交办统计环形图 -->
<template>
    <doughnutChart :option="option" class="assignedStatistics"/>
</template>

<script>
import doughnutChart from '@/components/doughnutChart/doughnutChart';
export default {
	name: 'assigned-statistics',
	data () {
		return {
			option: {},
			title: '本年交办数',
			color: ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF'],
			echartData: [{
				name: 'A类',
				value: '15'
			},
			{
				name: 'B类',
				value: '35'
			},
			{
				name: 'C类',
				value: '25'
			},
			{
				name: 'D类',
				value: '25'
			}
			]
		};
	},

	components: { doughnutChart },

	computed: {},

	// mounted: {},
	created () {
		this.getData();
	},
	methods: {
		formatNumber (num) {
			const reg = /(?=(\B)(\d{3})+$)/g;
			return num.toString().replace(reg, ',');
		},
		getData () {
			const total = this.echartData.reduce((a, b) => {
				return a + b.value * 1;
			}, 0);
			this.option = {
				color: this.color,
				title: [{
					text: '{name|' + this.title + '}\n{val|' + this.formatNumber(total) + '}',
					top: 'center',
					left: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: 14,
								fontWeight: 'normal',
								color: '#52def1',
								padding: [10, 0]
							},
							val: {
								fontSize: 32,
								fontWeight: 'bold',
								color: '#52def1',
							}
						}
					}
				}],
				legend: {
					bottom: 0,
					left: 'center',
					textStyle: {
						color: '#52def1'
					}
				},
				series: [
					{
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: (params, api) => {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
									startAngle: (0) * Math.PI / 180,
									endAngle: (90) * Math.PI / 180
								},
								style: {
									stroke: '#0CD3DB',
									fill: 'transparent',
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					},
					{
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: (params, api) => {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
									startAngle: (180) * Math.PI / 180,
									endAngle: (270) * Math.PI / 180
								},
								style: {
									stroke: '#0CD3DB',
									fill: 'transparent',
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					}, {
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: (params, api) => {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7,
									startAngle: (270) * Math.PI / 180,
									endAngle: (40) * Math.PI / 180
								},
								style: {
									stroke: '#0CD3DB',
									fill: 'transparent',
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					}, {
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: (params, api) => {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7,
									startAngle: (90) * Math.PI / 180,
									endAngle: (220) * Math.PI / 180
								},
								style: {
									stroke: '#0CD3DB',
									fill: 'transparent',
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					}, {
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: (params, api) => {
							const x0 = api.getWidth() / 2;
							const y0 = api.getHeight() / 2;
							const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7;
							const point = this.getCirlPoint(x0, y0, r, (90));
							return {
								type: 'circle',
								shape: {
									cx: point.x,
									cy: point.y,
									r: 4
								},
								style: {
									stroke: '#0CD3DB', // 粉
									fill: '#0CD3DB'
								},
								silent: true
							};
						},
						data: [0]
					}, {
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: (params, api) => {
							const x0 = api.getWidth() / 2;
							const y0 = api.getHeight() / 2;
							const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7;
							const point = this.getCirlPoint(x0, y0, r, (270));
							return {
								type: 'circle',
								shape: {
									cx: point.x,
									cy: point.y,
									r: 4
								},
								style: {
									stroke: '#0CD3DB', // 绿
									fill: '#0CD3DB'
								},
								silent: true
							};
						},
						data: [0]
					},
					{
						type: 'pie',
						radius: ['45%', '60%'],
						center: ['50%', '50%'],
						data: this.echartData,
						itemStyle: {
							borderWidth: 2
						},
						labelLine: {
							show: false
						},
						label: {
							formatter: params => {
								return (
									'{value|' + (params.value) + '%}'
								);
							},
							rich: {
								icon: {
									fontSize: 16
								},
								name: {
									fontSize: 14,
									padding: [0, 10, 0, 4],
									color: '#52def1'
								},
								value: {
									fontSize: 18,
									fontWeight: 'bold',
									color: '#52def1'
								}
							}
						},

					}]
			};
		},
		// 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
		getCirlPoint (x0, y0, r, angle) {
			const x1 = x0 + r * Math.cos(angle * Math.PI / 180);
			const y1 = y0 + r * Math.sin(angle * Math.PI / 180);
			return {
				x: x1,
				y: y1
			};
		},

	}
};

</script>
<style lang='less' rel="stylesheet/less" scoped>
.assignedStatistics{
        width:100%;
        height: 100%;
    }
</style>
